<template>
  <div>
    <el-alert
      style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
      :closable="false" title="菜单   管理"/>
    <el-form size="small" style="margin-left: 15px" :inline="true" class="demo-form-inline">
      <el-button style="margin-left: 25px" type="primary" @click="dialogFormVisible = true; editForm = {}"><i
        class="el-icon-circle-plus-outline"></i>添加菜单
      </el-button>
    </el-form>
    <el-divider></el-divider>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      class="content"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :header-cell-style="{'text-align':'center'}" >
      <el-table-column prop="title" label="标题" width="180"/>
      <el-table-column prop="url" label="url(后端访问地址前缀)" width="180"/>
      <el-table-column prop="authCode" label="权限编码" width="180"/>
      <el-table-column prop="path" label="路径(后端路由)" width="180" align="center"/>
      <el-table-column prop="component" label="组件" width="180" align="center"/>
      <el-table-column prop="name" label="名称" width="180" align="center"/>
      <el-table-column prop="icon" label="图标" width="180" align="center"/>
      <el-table-column prop="level" label="类型" width="180" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level == '0'" size="small" type="info">目录</el-tag>
          <el-tag v-if="scope.row.level == '1'" size="small">菜单</el-tag>
          <el-tag v-if="scope.row.level == '2'" size="small" type="success">路径</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="requireAuth" label="是否展示" width="180" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.hidden == true" size="small" type="info">隐藏</el-tag>
          <el-tag v-if="scope.row.hidden == false" size="small">展示</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="enabled" label="状态" width="180" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.enabled == '0'" size="small" type="danger">禁用</el-tag>
          <el-tag v-if="scope.row.enabled == '1'" size="small" type="success">启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150px" align="center">
        <template slot-scope="scope">
          <el-button @click="updateMenu(scope.row)" slot="reference" type="text">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            title="真的确定删除吗？"
            @confirm="deleteMenu(scope.row.id)"
          >
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
      <el-form :model="editForm">
        <el-form-item label="上级菜单"  :label-width="formLabelWidth">
          <el-select v-model="editForm.parentId" autocomplete="off">
            <template v-for="item in tableData">
              <el-option :label="item.title" :value="item.id"></el-option>
              <template v-for="children in item.children">
                <el-option :label="children.title" :value="children.id">
                  <span>{{ "- " + children.title }}</span>
                </el-option>
              </template>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称"  :label-width="formLabelWidth">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路径(前端路由路径)"  :label-width="formLabelWidth">
          <el-input v-model="editForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="url(后端接口)"  :label-width="formLabelWidth">
          <el-input v-model="editForm.url" autocomplete="off">
            <template slot="append">/**</template>
          </el-input>
        </el-form-item>
        <el-form-item label="权限编码"  :label-width="formLabelWidth">
          <el-input v-model="editForm.authCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件"  :label-width="formLabelWidth">
          <el-input v-model="editForm.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标"  :label-width="formLabelWidth">
          <el-input v-model="editForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="editForm.level">
            <el-option :value=0 label="目录"></el-option>
            <el-option :value=1 label="菜单"></el-option>
            <el-option :value=2 label="地址"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否隐藏" :label-width="formLabelWidth">
          <el-select v-model="editForm.hidden">
            <el-option :value=1 label="是"></el-option>
            <el-option :value=0 label="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="editForm.enabled">
            <el-option :value=0 label="禁用"></el-option>
            <el-option :value=1 label="启用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      dialogFormVisible: false,
      editForm: {},
      formLabelWidth: '120px',
      tableData: [],
    }
  },
  created() {
    this.load()
  },
  computed : {
    parentIdIsNull() {return this.editForm.id ? true : false},
  },
  methods : {
    //打开编辑表单
    updateMenu(row) {
      this.axios.get('/sys/menu/info/'+row.id).then(resp => {
        if (resp.code === 200) {
          this.dialogFormVisible = true
          this.editForm = resp.data
        }
      })
    },
    // addMenu() {
    //   dialogFormVisible = true; this.editForm = {}
    // },
    submitForm() {
      if (this.editForm.url) {
        this.editForm.url = this.editForm.url + '/**'
      }
      console.log(this.editForm)
      this.axios.post('/sys/menu/' + (this.editForm.id ? 'update':'add'), this.editForm).then((resp) => {
        if (resp.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            onClose: () => { //关闭回调
            }
          });
          this.load();
          this.dialogFormVisible = false
          this.editForm = {}
        }
      })
    },
    deleteMenu(id) {
      this.axios.get('/sys/menu/delete/' + id).then(resp => {
        if (resp.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            onClose: () => { //关闭回调
            }
          });
          this.load();
        }
      })
    },
    load() {
      this.axios.get('/sys/menu/list').then((resp) => {
        this.tableData = resp.data
      })
    }
  }
}
</script>

<style scoped>
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}

.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}

.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
